<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AQ-SYSTEM</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  main {
    padding: 0 15px;
  }

  button {
    margin-top: 20px;
    width: 56px;
    height: 42px;
    padding: 0 15px;
    width: 100%;

    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
  }

  .success {
    background-color: rgb(7, 193, 96);
  }

  .danger {
    background-color: rgb(238, 10, 36);
  }

  .row {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    display: flex;
    padding: 10px 0;
  }

  .row label {
    display: block;
    width: 25%;
    font-weight: 600;
  }

  .row input {
    width: 75%;
    box-sizing: border-box;
    padding: 0 15px;
    outline: none;
    font-size: 14px;
  }

  h1 {
    text-align: center;
    margin-top: 40px;
  }

  #chart {
    margin-top: 20px;
  }
</style>

<body>
  <h1>AQ-SYSTEM</h1>
  <main id="app">
    <div>
      <div id="chart" style="width: 100%; height: 400px"></div>
      <div>
        TVOC:{{air.tvoc}} ppb
      </div>
      <div>
        湿度:{{air.humi}}% RH
      </div>
      <div>
        温度:{{air.temp}} 摄氏度
      </div>
      <div>
        CO2:{{air.co2}} ppm
      </div>

      <form @submit.prevent="submit">
        <div class="row">
          <label for="">WIFI名称</label><input type="text" v-model="ssid" name="ssid" placeholder="请输入SSID" />
        </div>
        <div class="row">
          <label for="">WIFI密码</label><input type="text" v-model="password" name="password" placeholder="请输入密码" />
        </div>
        <div class="row">
          <label for="">服务器地址</label><input type="text" v-model="server" name="password" placeholder="请输入域名或IP地址" />
        </div>
        <button class="success">提交</button>
      </form>
    </div>
    <p>继电器状态 {{on?'开':'关'}}</p>
  </main>
  <script src="./vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        ssid: "",
        password: "",
        server: "",
        on: false,
        loadding: true,
        air: {
          tvoc: 0,
          co2: 0,
          temp: 0,
          humi: 0
        }
      },
      created() {
        // this.getStatus();
        this.loadding = false;
      },
      mounted() {
        const myChart = echarts.init(document.getElementById("chart"));
        const colors = ["#5470C6", "#91CC75", "#EE6666"];
        const option = {
          color: colors,
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
          },
          grid: {
            right: "20%",
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["TVOC", "温度", "湿度"],
          },
          xAxis: {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            // prettier-ignore
            data: [],
          },
          yAxis: [
            {
              type: "value",
              name: "温度",
              position: "right",
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[1]
                },
              },
              axisLabel: {
                formatter: "{value} ℃",
              },
            },
            {
              type: "value",
              name: "湿度",
              position: "right",
              alignTicks: true,
              offset: 50,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[2]
                },
              },
              axisLabel: {
                formatter: "{value} %[RH]",
              },
              max: 100
            },
            {
              type: "value",
              name: "TVOC",
              position: "left",
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[0]
                },
              },
              max: 600,
              min: 0,
              axisLabel: {
                formatter: "{value} ppb",
              },
            },
          ],
          series: [
            {
              name: "TVOC",
              type: "line",
              yAxisIndex: 2,
              smooth: true,
              showSymbol: false,
              data: [],
            },
            {
              name: "温度",
              type: "line",
              smooth: true,
              showSymbol: false,
              data: [],
              max: 50
            },
            {
              name: "湿度",
              type: "line",
              smooth: true,
              yAxisIndex: 1,
              showSymbol: false,
              max: 100,
              data: [],
            },

          ],
        };
        myChart.setOption(option);
        let counter = 0;
        setInterval(() => {
          counter++;
          fetch('/esp8266/data', {
            method: 'get'
          }).then(res => res.json()).then(data => {
            option.xAxis.data.push(new Date().toLocaleTimeString());
            const {tvoc,temp,co2,humi}=data;
            this.air={
              tvoc,
              temp,
              co2,
              humi
            }
           
            option.series[0].data.push(tvoc);
            option.series[1].data.push(temp);
            option.series[2].data.push(humi);
            if (counter > 10) {
              option.xAxis.data.shift();
              option.series[0].data.shift();
              option.series[1].data.shift();
              option.series[2].data.shift();
            }
            myChart.setOption(option);
          });
        }, 2000)
      },
      methods: {
        submit() {
          fetch("/config", {
            method: "POST",
            body: JSON.stringify({
              ssid: this.ssid,
              password: this.password,
              server: this.server,
            }),
          });
        },
        getStatus() {
          fetch("/status", {
            method: "get",
          }).then((res) => {
            this.on = res === "1";
          });
        },
        switchBtn() {
          this.loadding = true;
          fetch("/switch", {
            method: "POST",
            body: "",
          }).then(() => {
            this.loadding = false;
          });
        },
      },
    });
  </script>
</body>

</html>